<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>测试flex兼容性</title>
    <style type="text/css">
        html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
        ul,li,div,p,body{margin:0;padding:0;text-align:left;}
        input{-webkit-appearance:button;}
        li{list-style:none;}
        a{text-decoration:none;}
        img{vertical-align:top;}
        i,em{font-style:normal;}
        article{padding:15px;width:800px}
        pre{border:1px dashed #ccc;padding:5px;margin-left: 15px;}
        p{margin-bottom:10px;font-size: 14px;line-height: 1.5}
        .hide,.spanclass{display:none;}
        body, html {background:#eee;text-align: left;height: 100%;width: 100%;font-family: "Microsoft YaHei","Helvetica Neue",Arial, HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;font-weight: normal;}
        *{-webkit-tap-highlight-color:rgba(14,159,111,0.5);-webkit-touch-callout:none;}
        .header{width: 100%;height:60px;background: #1f1f21;margin-bottom: 30px;}
        .header-logo{display: inline-block;height:60px;line-height: 60px;color:#fff;background: #FA7D3C;text-align: center;font-size: 26px;padding:0 15px;}
        .header a{font-size:16px;color:#fff;padding:0 15px}
        .header a:hover{color:#FA7D3C}
        .header-nav{float:right;padding-right:20px;height:60px;line-height: 60px;}
        .btn{text-align: center;}
        .btn a{background: #fff;color:#333;height:32px;line-height: 32px;padding:5px 15px;box-shadow:0px 0px 1px 0px rgba(0, 0, 0, 0.15);-webkit-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;transition:all 0.3s ease-out;margin: 10px;display: inline-block;font-size:16px;}
        .ewm{text-align: center;margin-bottom: 15px;}

        .footer{text-align: center;color:#ccc;height:40px;line-height: 40px;margin-top: 20px;font-size:14px;}
        .footer a{color:#bbb;}
        .footer a:hover{color:#f60;}


        .nav{
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            overflow: hidden;
            width:100%;
            font-size:14px;
        }
        .nav a{
            display: block;
            height:40px;
            line-height: 40px;
            color:#fff;
            text-align: center;
            border:1px solid #fff;
            background: #f60;
            text-decoration: none;
            -moz-flex: 1;
            -webkit-flex: 1;
            -o-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

    </style>
</head>
<body>
<div class='header'>
    <span class="header-logo">测试flex兼容性</span>
        <span class="header-nav">
        <a href="http://www.w3cmark.com/" target="_blank" title="前端笔记网">首页</a>
        <a href="http://www.w3cmark.com/mark/" target="_blank" title="IT导航">IT导航</a>
        </span>
</div>
<div class="ewm" id="qr_note"><img src="" id="img_qr"/></div>
<div class="ua" id="Jua"></div>
<div class="nav">
    <a href="">flex box1</a>
    <a href="">flex box2</a>
    <a href="">flex box3</a>
    <a href="">flex box4</a>
</div>
<article>
    <p>弹性盒子模型属性：box-orient, box-direction, box-align, box-pack, box-lines. </p>
    <p><strong>box-orient</strong><br>
        box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有：</p>
    <div class="zxx_code">
        <pre>horizontal | vertical | inline-axis | block-axis | inherit</pre>
    </div>
    <p>其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。</p>
    <p><strong>box-direction</strong><br>
    box-direction是用来确定子元素的排列顺序，可选值有：</p>
    <div class="zxx_code">
        <pre>normal | reverse | inherit</pre>
    </div>
    <p>其中normal是默认值，表示按照正常顺序排列。所谓正常顺序，就是我们看书写文字的顺序，从左往右，由上至下，先出现的元素，就上面或是左边。而reverse表示反转，原本从左往右应该是1-2-3的，结果显示确实3-2-1。</p>
    <p><strong>box-align</strong><br>
        box-align与box-pack都是决定盒子内部剩余空间怎么使用的。在行为效果上就是表现为“对齐”<br>
    其中box-align决定了垂直方向上的空间利用，也就是垂直方向上的对齐表现。而剩下的box-pack就是水平方向的了。<br>
    可选参数如下：</p>
    <div class="zxx_code">
        <pre>start | end | center | baseline | stretch</pre>
    </div>
    <p><strong>box-pack</strong><br>
        box-pack决定了父标签水平遗留空间的使用，其可选值有：</p>
    <div class="zxx_code">
        <pre>start | end | center | justify</pre>
    </div>
    <p> 就大部分的行为表现来说分别对应text-align属性的值：left | right | center | justify；但是，之所以box-pack不使用”left”, 而是”start”，是因为box-direction属性，这玩意可以反转原本的排列，原本的“左对齐”反转后结果是“右对齐”了，此时”left”显然就词不达意了，所以使用”start”更具有概括性，就是与父标签的起始位置对齐，从而不会产生语义与行为上的困扰。<br>
        </p>
    <p><strong>box-lines</strong><br>
        box-lines是用来决定子元素是可以换行显示呢？还是就算挤出油还是单行显示。两个可选值：</p>
    <div class="zxx_code">
        <pre>single | multiple</pre>
    </div>
</article>
<div class="footer"> Powered by <a href="http://w3cmark.com">w3cmark.com</a></div>
<script type="text/javascript">
    (function () {
        var us = navigator.userAgent.toLowerCase();
        document.getElementById('Jua').innerHTML = us;
        if (us.indexOf('mobile')!=-1) {
            document.getElementById('qr_note').style.display='none';
            return;
        }
        var uurl = location.href,
                api = 'http://qr.liantu.com/api.php?w=200&text='+uurl,
                img = document.getElementById('img_qr');
        img.src=api;
    })();

</script>
<span class="spanclass">
<script type="text/javascript">
    var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fdfce3b3ee53b60a115ae550e35e8a015' type='text/javascript'%3E%3C/script%3E"));
</script>
</span>
</body>
</html>